<template>
    门店名称:
    <input type="text" v-model="name" placeholder="请输入门店名称">
    <input type="button" value="查询" @click="Show">
   <table>
    <thead>
        <tr>
        <td>门店名称</td>
        <td>门店地址</td>
        <td>门店电话</td>
        <td>门店交通</td>
        <td>门店状态</td>
        <td>分店名称</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
        <tr v-for="i in info">
        <td>{{ i.Name }}</td>
        <td>{{ i.AddRess }}</td>
        <td>{{ i.Phone }}</td>
        <td>{{ i.Jtinfo }}</td>
        <td>{{ i.Status?"营业中":"已歇业" }}</td>
        <td>{{ i.FdName }}</td>
        <td>

            <input type="button" value="修改" @click="xiugai(i.Id)">
        </td>
    </tr>
    </tbody>
  <span>
    <a href="#" @click="page('F')">首页</a>
    <a href="#" @click="page('S')">上一页</a>
    <a href="#" @click="page('N')">下一页</a>
    <a href="#" @click="page('W')">尾页</a>
   
  </span>
   </table>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios';

const rou=useRoute();
const rouser=useRouter();
const name=ref("")
const info=ref({
    Id:1,
  "Name": "",
  "FdName": "",
  "Phone": "",
  "AddRess": "",
  "Jtinfo": "",
  "Status": true
})
onMounted(()=>{
    Show()
})
const fenye=ref({
    PageCount:1,
    RowCount:2,
    index:1,
    size:2
})
const Show=()=>{
    console.log(name.value);
            
    axios.get("https://localhost:7224/api/Shop/GetAll",{
        params:{
            name:name.value,
         
            index:fenye.value.index,
            size:fenye.value.size
        }
    })
    .then(res=>{
        console.log(res);
        
        info.value=res.data.Data_info;
        fenye.value.PageCount=res.data.PageCount
        fenye.value.RowCount=res.data.RowCount
    })
}
const page=(q:any)=>{
   
    switch (q){
        case 'F':
            fenye.value.index=1;
            break;
            case 'S':
                if(fenye.value.index<= fenye.value.PageCount){
                    fenye.value.index--;
                    
                }
                if(fenye.value.index<1){
                    alert("已经是第一页了");
                }

            break;
            case 'N':
           if(fenye.value.index<fenye.value.PageCount){
            fenye.value.index++;
           }else{
            alert("已经是最后一页了");
           }
            
            break;
            case 'W':
       fenye.value.index=fenye.value.PageCount;
            break;
    }
    Show();
}
const xiugai=(Id:number)=>{
        rouser.push({
            name:"UpdaShop",
            params:{
                id:Id
            }
        })
}
</script>

<style scoped>

</style>